<template>
  <div class="theTitle" :style="{ backgroundImage: 'url(' + backgroundImgSrc + ')' }">
    <div class="theIcon">
      <img src="@/assets/images/pointerToR.png" alt="">
    </div>
    <slot name="first"></slot>
    <slot name="last"></slot>
  </div>
</template>
<script>
export default {
  props: {
    theSize: String,
    theType: String
  },
  mounted() {
    console.log(import.meta.hot)
    // console.log(import.meta.url)
    // console.log(new URL('@/assets/images/titleThinSmall.png', import.meta.url).href)
    if (this.theSize == 'small') {
      if (this.theType == 'thin') {
        this.backgroundImgSrc = this.titleThinSmall
      } else if (this.theType == 'thicken') {
        this.backgroundImgSrc = this.titleThickenSmall
      }
    } else if (this.theSize == 'medium') {
      this.backgroundImgSrc = this.titleThinMedium
    } else if (this.theSize == 'large') {
      this.backgroundImgSrc = this.titleThinLarge
    }
  },
  data() {
    return {
      backgroundImgSrc: '',
      titleThinSmall: new URL('@/assets/images/titleThinSmall.png', import.meta.url).href,
      titleThickenSmall: new URL('@/assets/images/titleThickenSmall.png', import.meta.url).href,
      titleThinMedium: new URL('@/assets/images/titleThinMedium.png', import.meta.url).href,
      titleThinLarge: new URL('@/assets/images/titleThinLarge.png', import.meta.url).href,
    }
  }
}
</script>
<style>
.theTitle {
  line-height: 40px;
  font-size: 18px;
  color: #DBEAEA;

  display: flex;
  gap: 6px;

  padding-inline-start: 12px;
  margin-block-end: 8px;

  background-repeat: no-repeat;
}

.theIcon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.theFirst {
  font-family: '优设标题黑';
  font-size: 18px;
  color: #DBEAEA;
}

.theLast {
  font-size: 12px;
  color: #98C1FFa0;
  font-family: 'PingFang-Medium';
}
</style>